<!-- default-active="user"  设置user对应的菜单高亮 ；  :default-openeds="[1]"  设置展开    在<el-menu>标签里面加一个router属性，可实现点击不同的菜单跳转不同的页面-->
<!--加一个router属性，就会根据index里面的内容进行路由跳转 -->
<template>
  <el-aside :width="isCollapse ?'60px':'200px'" style="background-color: rgb(238, 241, 246); transition: 0.3s;">
    <el-menu
        style="width:200px; min-height: calc(100vh);  "
        :collapse="isCollapse"
        :default-active="$route.path"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b" router>

      <div class="logobox">
        <img v-show="!isCollapse" class="logotext" src="../assets/img/logo_text.png" alt="">
        <img v-show="isCollapse" class="logoimg" src="../assets/img/logo.png" style="width:50px;height: 50px; margin-left: 8px" >
      </div>

      <NavItem v-for="v in items" :key="v.url" :item="v" :basePath="v.url"/>
    </el-menu>
  </el-aside>
</template>

<script>
import NavItem from './Item'
import request from "../utils/request";

export default {
  name: "Aside",
  mounted() {
    //这个是为了点击某个菜单高亮 上面一开始是写死的
    console.log("路由" + this.$route.path)    //打印结果  /user
    this.getNav();
  },




  //计算属性
  computed: {
    isCollapse() {
      // 这里的数据就是从vuex取得
      return this.$store.state.tab.isCollapse
    }
  },

  data() {
    return {
      items: [],

    }
  },
  components: {NavItem},
  methods: {
    getNav() {
      request.get("/sys/menuTree",).then(res => {
        this.items = res.data;
      })
    }
  }
}
</script>

<style scoped>
.el-menu {
  border-right: 0;
}

.logotext {
  height: 50px;
}


.logobox {
  height: 50px;
}
</style>


